<template>
	<el-dialog title="" width="60%" :visible.sync="dialogTableVisible" :append-to-body='true'>
		<div class="alert-box">
			<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
			<div class="bt">教材选择</div>
			<div>

				<div style="float: left;">
					<!--<span style="font-size: 20px;">课程</span>-->
					<!--<el-select v-model="vkcid1" placeholder="请选择课程" style="margin-left: 10px;" @change="search()">
						<el-option v-for="v in xzkclist" :label="v.mc" :value="v.id+''"></el-option>
					</el-select>-->
					<el-col style="width: 150px;padding-right: 20px;">
						<el-menu :default-active="index1" class="el-menu-vertical-demo">
							<el-menu-item v-for="(v,index) in xzkclist" :index="index+''" @click="search(v.id)">
								<span slot="title">{{v.mc}}</span>
							</el-menu-item>
						</el-menu>
					</el-col>

				</div>
				<!--<p style="font-size: 20px;margin-top: 20px; margin-bottom: 20px;">教材---------------------------------------------------</p>-->
				<div style="overflow: hidden; ">
					<el-button type="success" size="small" @click="submit">确定</el-button>
					<el-button type="danger" size="small" @click="cancel">退出</el-button>
					<span style="color: red;">例：Becool-1（0）括号里的数字表示库存数量</span>
					<div v-for="city in dataList">
						<div v-if="city.id=='-99' " style="width:120px;color: #16A8E1; margin-top: 15px;">
							{{city.groupkey}}
						</div>
						<!--<el-checkbox-group v-model="checkList" @change="checkSelect">
							<el-checkbox v-if="city.id!='-99'" style="width:120px;" :label="city" type="selection">{{city.mc}} </el-checkbox>
						</el-checkbox-group>-->
						 <el-radio-group v-model="checkList" style="float: left; margin-top: 15px;">
						    <el-radio v-if="city.id!='-99'" style="width:120px;" :label="city" >{{city.mc}}</el-radio>
						  </el-radio-group>
					</div>
				</div>

				<!-- <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
				<!-- <div style="margin: 15px 0;">{{checkedCities}}</div> -->
				<!-- <el-checkbox-group v-for class="check" v-model="checkedCities" @change="checkSelect">
                   <el-checkbox v-for="city in dataList"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                    <el-checkbox v-for="city in dataList2"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                     <el-checkbox v-for="city in dataList3"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                      <el-checkbox v-for="city in dataList4"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group>
                 <el-checkbox-group class="check" v-model="checkedCities" @change="checkSelect">
                       <el-checkbox v-for="city in dataList5"  :label="city"  type="selection">{{city.kcmc}}</el-checkbox>
                 </el-checkbox-group> -->
				<!-- 动画加载 -->
				<LoadingComponent v-show="isLoading"></LoadingComponent>
			</div>
		</div>
		</div>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	import LoadingComponent from 'components/loading'
	import qs from 'qs'
	export default {
		props: ['params'],
		components: {
			LoadingComponent
		},
		data() {
			return {
				index1: "",
				name: '',
				dialogTableVisible: true,
				checkList: [],
				multipleList: [],
				dataList: [], //表格数据
				chooseList: ['aa', 'bb'],
				checkedCities: [],
				checkAll: false,
				vkcid1: '',
				xzkclist: [],
				/*
				    prop :  接口参数名
				    label : 接口中文名
				    hide : 是否隐藏这一列
				    align : 这一列对齐顺序 ： left,right,center
				    headerAlign : 这一列表头对齐方式 ： left,right,center
				*/

				/*动画加载*/
				isLoading: true, //动画加载
				searchLoading: false, //搜索按钮触发按钮动画

				/*模糊搜索条件*/
				inputmc: '', //  班级名称,

				/*分页属性设置*/
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: 1, //当前分页页码
				pagesizes: [12, 24, 36, 72], //显示个数的选择器选项
				pagesize: 12, //每页显示条目数
				total: 0, //总条数

				dropDownData: '', //

			}
		},
		created() {

			this.getxzkclist();
			//加载页面时调用
			if(this.params) {
				this.vkcid1 = this.params
			}

			this.isLoading = true; //动画开始

		},
		mounted() {

		},
		methods: {
			getxzkclist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'kcfl/getfllist', params2)
					.then(res => {
						//						console.log(res, 11)
						this.xzkclist = res.data.data.list;
						if(!this.params){
							this.vkcid1 = this.xzkclist[0].id
						}
						for(var i in this.xzkclist) {
							if(this.xzkclist[i].id == this.vkcid1) {
								this.index1 = i
							}
						}
						this.search(this.vkcid1); //分页获取默认数据
					}).catch(res => {
						//						console.log(res)
					})
			},
			handleCheckAllChange(event) {
				this.checkedCities = event.target.checked
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.dataList.length;
				this.$message.warning(this.checkAll)
			},

			search(id) { //查询搜索触发事件
				var logininfo = JSON.parse(localStorage.logininfo); //获取学校  用户id
				var params3 = qs.stringify({
					fxkcid: id,
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.searchLoading = true;
				this.axios.post(this.$store.state.api + 'kcfl/getwpjclist', params3)
					.then(res => {
						//						console.log('111', res)
						this.isLoading = false; //动画结束

						// let data = res.data.data;
						// let list = data.list1;
						// let list2 = data.list2;
						// let list3 = data.list3;
						// let list4 = data.list4;
						// let list5 = data.list5;
						// this.total = data.totalPage;
						this.dataList = res.data.data.list;
						// this.dataList2 = list2;
						// this.dataList3 = list3;
						// this.dataList4 = list4;
						// this.dataList5 = list5;
						this.searchLoading = false;
					}).catch(res => {
						//						console.log(res)
						this.searchLoading = false;
					})
			},
			submit() {
				console.log(this.checkList)
				let arr = [];
//				this.multipleList.forEach(function(v, i) {
//					arr.push({
//						model:v.model,
//						zid:v.zid,
//						pid:v.pid,
//						sonlist:v.sonlist,
//						jcjg: v.jg,
//						id: v.id,
//						mc: v.mc,
//						dw: v.dw,
//						jg: v.jg,
//						zk: v.zk,
//						gmsl: v.gmsl,
//						number: v.gmsl,
//						yjje: (v.jg * v.gmsl * v.zk * 1 / 100)
//					})
//				})
				arr.push({
						model:this.checkList.model,
						zid:this.checkList.zid,
						pid:this.checkList.pid,
						sonlist:this.checkList.sonlist,
						jcjg: this.checkList.jg,
						id: this.checkList.id,
						mc: this.checkList.mc,
						dw: this.checkList.dw,
						jg: this.checkList.jg,
						zk: this.checkList.zk,
						gmsl: this.checkList.gmsl,
						number: this.checkList.gmsl,
						yjje: (this.checkList.jg * this.checkList.gmsl * this.checkList.zk * 1 / 100)
					})
				//				console.log(arr)
				this.multipleList = arr;
				this.$emit('close', {
					type: 'course',
					cancel: false,
					data: this.multipleList
				})
			},
//			checkSelect() { //点击单选select触发事件
//				 console.log(this.checkList)
//				this.multipleList = this.checkList;
//			},

			cancel() {
				this.$emit('close', {
					type: 'course',
					cancel: true
				})
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				//				console.log(type, data)
				for(let i in this.componentList) {
					if(type == this.componentList[i].type) {

						this.componentList[i].toggle = true;
						this.componentList[i].params = data;

						if(this.componentList[i].data.type == 'single') {
							this.componentList[i].data.index = data.row.id

						} else if(this.componentList[i].data.type == 'multiple') {
							this.componentList[i].data.index = this.multipleDelNum;

						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.componentList) {
					if(setting.type == this.componentList[i].type) {
						this.componentList[i].toggle = false;

						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}

		},
		computed: {
			...mapState([
				'api' //域名
			])
		}
	}
</script>

<style lang="less" scoped>
	.el-checkbox[data-v-5e2c0840] {
		margin-top: 0;
	}
	
	.el-checkbox+.el-checkbox {
		margin-left: 0;
	}
	
	.alert-box {
		overflow: hidden;
		text-align: left;
	}
	
	.close {
		z-index: 10;
	}
	
	.el-checkbox {
		width: 60px;
		height: 100%;
		float: left;
		margin-top: 10px;
		margin-left: 0px;
		text-align: center;
	}
	
	.bt {
		width: 100%;
		height: 50px;
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}
	
	.btn {
		margin-top: 50px;
		/*width:80px;*/
		margin-left: 50px;
		/*padding:7px 15px;*/
	}
</style>